1
00:00:00,680 --> 00:00:01,280
Hey there.

2
00:00:01,280 --> 00:00:02,360
Welcome back.

3
00:00:02,360 --> 00:00:07,610
In this lecture we're going to be learning about a new service and a new feature in the Roblox API.

4
00:00:07,640 --> 00:00:11,270
The new service we're going to be learning about is the text chat service.

5
00:00:11,270 --> 00:00:14,900
And the other feature we're going to learn about is called Rich Text Markup.

6
00:00:14,990 --> 00:00:22,700
The text chat service is a new chat API that came out in June of 2022 to replace the Legacy Chat API.

7
00:00:22,730 --> 00:00:27,650
The purpose of this new service is to make interacting with the chat system easier, and to provide

8
00:00:27,650 --> 00:00:30,350
more customization options relating to chat.

9
00:00:31,090 --> 00:00:37,000
Here we can read in the Roblox documentation that the text chat service is a service for handling inexperienced

10
00:00:37,000 --> 00:00:38,080
text chat.

11
00:00:38,110 --> 00:00:43,540
It handles various text chat related tasks such as managing channels, decorating messages, filtering

12
00:00:43,570 --> 00:00:47,290
text, creating commands, and developing custom chat interfaces.

13
00:00:47,320 --> 00:00:52,150
This service comes with a few properties, functions, events, and even some callbacks that we can

14
00:00:52,150 --> 00:00:56,020
go ahead and use to modify the text in our game.

15
00:00:56,590 --> 00:01:02,050
These two callbacks allow you to attach functions to them, and the functions you attach to these properties

16
00:01:02,050 --> 00:01:08,560
will be executed before either a message bubble appears or before a message in the chat appears, allowing

17
00:01:08,560 --> 00:01:10,510
you to customize those messages.

18
00:01:11,140 --> 00:01:16,450
There's also a function where we can go ahead and pass a player or a part in our game, and have that

19
00:01:16,450 --> 00:01:20,710
part or player display a chat bubble, just like a real player would.

20
00:01:21,720 --> 00:01:25,740
For this lecture, we're going to be taking a look at both of these callbacks and how we can customize

21
00:01:25,740 --> 00:01:33,240
both messages and chat messages using rich text markup for VIP players in our game, Rich text markup

22
00:01:33,240 --> 00:01:38,190
is a feature that allows us to customize text in many different ways, such as adding a stroke to a

23
00:01:38,190 --> 00:01:44,460
specific chunk of text, changing the color of certain chunks of text, italicizing text, and so on,

24
00:01:44,460 --> 00:01:46,350
all within the string itself.

25
00:01:46,680 --> 00:01:53,250
Here we can read that rich text markup or UI rich text utilizes simple markup tags to style sections

26
00:01:53,250 --> 00:01:58,200
of string and bold italics, underline, fill, color, stroke variations, and more.

27
00:01:58,200 --> 00:02:03,210
You can apply styling tags to text labels, text buttons, and text box objects.

28
00:02:03,210 --> 00:02:08,850
And here is all of the different tags that are supported within rich text markup.

29
00:02:08,850 --> 00:02:14,850
So you would pass a string, and then you would pass in the special keywords or these special chunks

30
00:02:14,850 --> 00:02:18,090
of text to modify the original text.

31
00:02:18,090 --> 00:02:23,400
For example, here, if we have a string that says, I want the orange candy, we can insert these special

32
00:02:23,400 --> 00:02:27,660
chunks of text to go ahead and modify a certain chunk of text.

33
00:02:27,660 --> 00:02:33,240
So we modify this orange word right here to make it actually display orange in the game.

34
00:02:33,240 --> 00:02:40,200
You can also modify the size of text, the type of font, the font family, the weight of the font.

35
00:02:40,200 --> 00:02:42,420
You can add, a stroke, transparency.

36
00:02:42,450 --> 00:02:46,380
You can make certain text bold italicized underline.

37
00:02:46,380 --> 00:02:47,910
You can add strikethroughs.

38
00:02:47,910 --> 00:02:53,880
You can insert line breaks, make certain chunks of text uppercased, or have small upper cases.

39
00:02:53,880 --> 00:02:58,530
And you can even add comments inside of these rich text formatted strings.

40
00:02:59,420 --> 00:03:05,240
Here, we can actually view the text chat service inside of the explorer menu in studio and inside of

41
00:03:05,240 --> 00:03:10,610
the text chat service, we have a few things that we can actually customize to manipulate how text appears

42
00:03:10,610 --> 00:03:11,300
in our game.

43
00:03:11,300 --> 00:03:15,860
For example, if you wanted to configure the chat window which appears on the top left of the screen,

44
00:03:15,860 --> 00:03:17,750
then it gives us some options for changing.

45
00:03:17,750 --> 00:03:23,540
For example, the font, the background color, the transparency, the text color and size, as well

46
00:03:23,540 --> 00:03:29,450
as the text stroke and the text stroke transparency, as well as another few extra options.

47
00:03:29,450 --> 00:03:34,220
We can do the exact same thing here, with the bubble chat that appears over players heads, as well

48
00:03:34,220 --> 00:03:39,080
as manipulating the input bar where we enter in text to our chat window.

49
00:03:39,500 --> 00:03:44,750
This bubble chat configuration also has some other additional stuff that we can modify, such as the

50
00:03:44,750 --> 00:03:50,840
UI corner for bubble text, the UI gradient, we can change the padding, and you can even add an image

51
00:03:50,840 --> 00:03:53,000
label within these bubble chats.

52
00:03:54,430 --> 00:03:59,740
So if we go and playtest the game and we take a look at the regular text chat window, which is this

53
00:03:59,740 --> 00:04:00,430
right here?

54
00:04:00,430 --> 00:04:01,990
As you can see, it looks pretty basic.

55
00:04:01,990 --> 00:04:07,870
We have a black transparent background with a darker input bar and a button right here to enter in our

56
00:04:07,870 --> 00:04:08,350
text.

57
00:04:08,350 --> 00:04:14,680
Pretty simple, and we are able to manipulate or change how this box appears in our game by going to

58
00:04:14,680 --> 00:04:16,240
the text chat service.

59
00:04:17,130 --> 00:04:21,870
So let's say we want to change the background color of the chat window, for example.

60
00:04:21,870 --> 00:04:27,540
Maybe we don't want it to be black, but we would like it to be, I don't know, maybe a dark orange.

61
00:04:27,540 --> 00:04:29,550
So if we change the color here.

62
00:04:30,440 --> 00:04:31,550
And do something like that.

63
00:04:31,550 --> 00:04:33,680
And then we went to go play test our game.

64
00:04:34,610 --> 00:04:40,070
Now if we go open our window, as you can see, it has changed the color to be that orange color.

65
00:04:40,100 --> 00:04:42,470
Of course, it looks pretty ugly right now.

66
00:04:42,890 --> 00:04:47,060
Um, you probably wouldn't want to pick a color like this, or you would probably want to go with a

67
00:04:47,060 --> 00:04:48,890
color scheme that matches your game.

68
00:04:48,890 --> 00:04:55,130
But at least Roblox Studio gives you the options to modify your chat window, your chat input bar,

69
00:04:55,130 --> 00:04:57,380
as well as bubble chats in your game.

70
00:04:59,120 --> 00:05:02,990
If you remember earlier, rich text also supports text labels.

71
00:05:02,990 --> 00:05:07,400
So in this part right here I have a surface GUI with a text label inside of it.

72
00:05:07,400 --> 00:05:12,230
And if we go and scroll down to where we get to the text section in the properties panel.

73
00:05:12,230 --> 00:05:16,700
As you can see, there is an option here to enable rich text for this text label.

74
00:05:16,700 --> 00:05:22,940
So if we go ahead and check mark that now any text that we input in here, if it has that rich text

75
00:05:22,940 --> 00:05:28,940
stylization, like those little chunks of code to stylize your text, it will apply those effects onto

76
00:05:28,940 --> 00:05:31,280
the text that will appear on our part.

77
00:05:31,400 --> 00:05:37,370
So, for example, if I wanted to make a certain chunk of text bold, I could type a string in here.

78
00:05:37,370 --> 00:05:39,740
Like this text is bold.

79
00:05:39,740 --> 00:05:42,800
And let's say I want to make only the word right here bold.

80
00:05:42,800 --> 00:05:48,710
Then I would put in those two, um, less than and greater than symbols, put it in a, B, and then

81
00:05:48,710 --> 00:05:51,260
I also have to close this symbol as well.

82
00:05:51,260 --> 00:05:56,240
So I put another set and I believe it would be slash b.

83
00:05:56,240 --> 00:05:56,540
Actually.

84
00:05:56,540 --> 00:06:01,640
Let's go ahead and take a look at the documentation of what specifically these have to be.

85
00:06:01,640 --> 00:06:06,470
So here it says to insert or make a chunk of text bold in your string.

86
00:06:06,470 --> 00:06:12,020
You start with a less than symbol and then be followed by a greater than symbol.

87
00:06:12,020 --> 00:06:16,160
And then another less than with a slash, a, B, and then a greater than symbol.

88
00:06:16,160 --> 00:06:18,740
So this opens the section of text you would like to bold.

89
00:06:18,740 --> 00:06:21,860
And this closes the section of text that you would like to bold.

90
00:06:22,280 --> 00:06:26,750
So if I go and hit enter, as you can see this text is bold.

91
00:06:26,750 --> 00:06:30,290
And it only made this particular word right here bold.

92
00:06:30,290 --> 00:06:32,450
We can of course also change the color.

93
00:06:32,450 --> 00:06:38,060
We can add a stroke to this text and basically do whatever kind of manipulation we want to this particular

94
00:06:38,060 --> 00:06:40,610
word right here that is inside of our string.

95
00:06:41,150 --> 00:06:45,590
For example, if we would like to change the color of the font for a particular word, it says right

96
00:06:45,590 --> 00:06:49,010
here, we have to open it with this word of font color.

97
00:06:49,010 --> 00:06:55,190
And then inside of these two, um strings, we would have to pass a hex code representing the color

98
00:06:55,190 --> 00:06:57,110
that we would like to apply to our text.

99
00:06:57,110 --> 00:06:59,090
So let's go ahead and copy this.

100
00:07:00,030 --> 00:07:03,240
And now back in studio, we can go ahead and paste it right here.

101
00:07:03,720 --> 00:07:11,190
And let's go ahead and grab this closing section because you need to close these different chunks here

102
00:07:11,190 --> 00:07:13,680
in the inverse way that you applied them.

103
00:07:13,680 --> 00:07:19,920
So for example since this one is first that means we also need to close it last.

104
00:07:19,920 --> 00:07:23,310
And since this one is second that means we need to close it first here.

105
00:07:24,830 --> 00:07:30,680
But now we can go ahead and put in a hex code to represent what color we would like to change this word

106
00:07:30,680 --> 00:07:31,310
to.

107
00:07:31,610 --> 00:07:37,040
In order to pick a hex color, what we can do is we can open up our color editor.

108
00:07:37,040 --> 00:07:42,080
We'll just pick a random color like this bright green, and we actually can grab it here.

109
00:07:42,080 --> 00:07:43,700
It's labeled as HTML.

110
00:07:43,790 --> 00:07:46,490
And we'll just copy that right here.

111
00:07:46,490 --> 00:07:48,050
And then we're just going to cancel.

112
00:07:48,050 --> 00:07:50,600
So it resets the text back to black.

113
00:07:50,600 --> 00:07:54,470
And then we can go ahead and paste in that HTML code.

114
00:07:54,470 --> 00:07:58,220
And then if we hit enter now our word has turned green.

115
00:07:58,220 --> 00:08:01,160
This text is bold and it's green as well.

116
00:08:01,640 --> 00:08:07,130
So this is how you can use rich text within your text labels and your surface guys.

117
00:08:07,130 --> 00:08:11,960
You can use them in your billboard GUIs and you can use them on your screen guys.

118
00:08:13,300 --> 00:08:17,980
So now let's go ahead and take a look at how to use those two callbacks that we looked at earlier in

119
00:08:17,980 --> 00:08:19,420
the text chat service.

120
00:08:19,420 --> 00:08:23,740
What I'm going to do is I'm going to create a new script inside of starter player script.

121
00:08:23,740 --> 00:08:26,260
So we'll insert a new local script in here.

122
00:08:26,860 --> 00:08:32,980
And at the top we can go ahead and grab the text chat service by using the Get Service function and

123
00:08:32,980 --> 00:08:34,870
pass the text chat service.

124
00:08:35,140 --> 00:08:38,440
And then I'm also going to go ahead and grab the player service for a reason.

125
00:08:38,440 --> 00:08:40,180
You'll see in a little bit.

126
00:08:42,290 --> 00:08:46,910
Now remember, in the text chat service, we had access to two callbacks that we could overwrite.

127
00:08:46,910 --> 00:08:49,490
The first one was on an incoming message.

128
00:08:49,490 --> 00:08:55,250
So we provide a function to this, which gets called when the text chat service is receiving an incoming

129
00:08:55,250 --> 00:08:55,970
message.

130
00:08:55,970 --> 00:08:58,400
And then we have another one for on bubble added.

131
00:08:58,400 --> 00:09:02,570
And it says this function will be called when a bubble chat is about to be displayed.

132
00:09:03,050 --> 00:09:07,100
So for on incoming message, we need to set it to a new lambda function.

133
00:09:07,490 --> 00:09:11,210
And this function is actually going to be passed in argument.

134
00:09:11,210 --> 00:09:13,640
And we're going to call this argument a message.

135
00:09:14,790 --> 00:09:19,830
If we look in the Roblox documentation, as you can see here in the parameters section, it says that

136
00:09:19,830 --> 00:09:26,430
any function connected to the on incoming message property is going to be passed to a text chat message,

137
00:09:26,430 --> 00:09:29,760
and we can go ahead and click this and see what exactly this is.

138
00:09:29,760 --> 00:09:34,650
And it says this is an immutable data object representing a text chat message.

139
00:09:34,650 --> 00:09:39,690
And as you can see, it stores a bunch of different properties, such as a unique identifier for the

140
00:09:39,690 --> 00:09:40,890
text chat message.

141
00:09:40,890 --> 00:09:43,830
It gives us the filtered text for the user.

142
00:09:43,830 --> 00:09:50,130
It gives us a reference to the origin text channel, a reference to the origin text source, as well

143
00:09:50,130 --> 00:09:54,600
as a timestamp and some other properties we're not going to worry about, but we want to take a quick

144
00:09:54,600 --> 00:09:58,410
look at what a text channel and a text sources.

145
00:09:58,410 --> 00:10:05,340
So if we go ahead and click text channel here, it says represents a text chat channel contains text

146
00:10:05,340 --> 00:10:07,140
sources as descendants.

147
00:10:07,140 --> 00:10:11,940
So this text channel is going to contain sources from where messages are coming from.

148
00:10:11,940 --> 00:10:15,540
Most commonly these are going to be different players in your game.

149
00:10:15,540 --> 00:10:20,190
And to take a look at this, we're going to go hop back inside of studio and playtest our game.

150
00:10:21,000 --> 00:10:22,170
Back in studio here.

151
00:10:22,170 --> 00:10:26,400
If we go ahead and move over to our explorer window and open up the text chat service.

152
00:10:26,400 --> 00:10:29,760
As you can see, we now have a new folder in here called Text Channels.

153
00:10:29,760 --> 00:10:34,920
And these are the text channels that the property of our text chat message is referring to.

154
00:10:34,920 --> 00:10:38,610
As you can see right here, here is a text channel instance.

155
00:10:38,610 --> 00:10:42,750
And inside of here is a text source which would be my player.

156
00:10:42,750 --> 00:10:46,110
And that stores my user ID for my player.

157
00:10:46,110 --> 00:10:51,300
So this doesn't actually store a direct reference to my player, but instead this is a text source that

158
00:10:51,300 --> 00:10:54,960
contains the user ID of where this message came from.

159
00:10:54,960 --> 00:11:02,100
So that means if you wanted to grab the player when the on incoming message function is called, you

160
00:11:02,100 --> 00:11:06,480
would have to use the function and the player service get player by user ID.

161
00:11:06,480 --> 00:11:09,060
And that's exactly what we're going to use the player service for.

162
00:11:10,820 --> 00:11:16,940
So since this function is going to be passed a text chat message instance, we can go ahead and index

163
00:11:16,940 --> 00:11:19,280
this instance to get all of its properties.

164
00:11:19,280 --> 00:11:24,740
For example, we can get the text source and it says a reference to the origin text source.

165
00:11:24,740 --> 00:11:27,440
And from there we can go ahead and grab the player.

166
00:11:27,950 --> 00:11:33,410
Now, since I want this function to only manipulate messages for players that have VIP in our game,

167
00:11:33,410 --> 00:11:40,430
I first want to verify that this particular text chat message instance actually has a text source.

168
00:11:40,430 --> 00:11:45,380
So we're going to check if this message does not have a text source.

169
00:11:45,380 --> 00:11:52,100
So if not message dot text source then we're just going to go ahead and exit out of this function because

170
00:11:52,100 --> 00:11:54,200
we're not going to care about that particular message.

171
00:11:54,200 --> 00:11:56,120
It's not going to be from a player.

172
00:11:56,270 --> 00:12:00,740
However, what we can do now is grab the player that sent this message.

173
00:12:00,740 --> 00:12:07,100
If it does have a text source, and we're going to use the function in the player service, get player

174
00:12:07,100 --> 00:12:11,900
by user ID and that will return the player with the given user ID if they are in game.

175
00:12:12,170 --> 00:12:18,500
And then to get the user ID, we're going to pass message dot text source and the text source stores

176
00:12:18,500 --> 00:12:19,940
that user ID for us.

177
00:12:19,940 --> 00:12:22,460
So now we should be able to get a player here.

178
00:12:22,580 --> 00:12:26,000
And this is where we can go ahead and check if this player has VIP.

179
00:12:26,150 --> 00:12:32,360
The easiest way to do it is you would have a server script set an attribute on this player to tell us

180
00:12:32,360 --> 00:12:33,770
whether or not they have VIP.

181
00:12:33,770 --> 00:12:39,620
For example, you could call an attribute like has VIP and that would store a boolean of either true

182
00:12:39,620 --> 00:12:40,340
or false.

183
00:12:40,340 --> 00:12:42,740
So I'll create a variable called has VIP.

184
00:12:42,740 --> 00:12:44,690
And it's going to be equal to my player.

185
00:12:44,690 --> 00:12:48,200
And we're going to get attribute has VIP.

186
00:12:48,680 --> 00:12:56,450
So if they have VIP then we want to go ahead and modify their message by adding an additional prefix

187
00:12:56,450 --> 00:12:57,590
to their message.

188
00:12:57,590 --> 00:12:58,760
What is a prefix.

189
00:12:58,760 --> 00:13:02,270
Well I'll show you if we go and playtest our game.

190
00:13:03,360 --> 00:13:07,350
A prefix is going to be anything that shows up before our message.

191
00:13:07,350 --> 00:13:10,500
So if I type in the chat like hello!

192
00:13:11,350 --> 00:13:14,530
Our username right here would be considered a prefix.

193
00:13:14,530 --> 00:13:19,420
This is one of the prefixes that appear before our message appears in the chat.

194
00:13:19,420 --> 00:13:25,000
So if I want to add a chat tag in here that says something like VIP, then I could insert it before

195
00:13:25,000 --> 00:13:28,330
this prefix right here and then update that.

196
00:13:28,330 --> 00:13:32,290
And that's where my function would return that new prefix.

197
00:13:32,290 --> 00:13:38,650
Then internally the game will apply that prefix and then it'll show up inside of the chat.

198
00:13:39,490 --> 00:13:45,220
Now, in order to do this, I have to create something called a text chat message property, and that

199
00:13:45,220 --> 00:13:47,350
is created by the instance dot new function.

200
00:13:47,350 --> 00:13:49,930
So I'm going to create a new variable called properties.

201
00:13:49,930 --> 00:13:55,120
And it's going to be equal to instance dot new text chat message properties.

202
00:13:55,120 --> 00:14:02,440
So if we want to modify a message by adding a prefix to it, we have to use a text chat message property.

203
00:14:02,920 --> 00:14:06,880
Then inside of this property we can go ahead and add a prefix.

204
00:14:06,880 --> 00:14:10,180
So this stores the prefix text to override.

205
00:14:10,180 --> 00:14:13,270
Since this is a new property, there's not going to be anything in here.

206
00:14:13,270 --> 00:14:16,090
So we can go ahead and set it to whatever we would like.

207
00:14:16,570 --> 00:14:20,110
Now I want to go ahead and add a chat tag of VIP.

208
00:14:20,110 --> 00:14:22,540
So I'll put VIP between two brackets.

209
00:14:22,540 --> 00:14:26,950
And this is the prefix that I would like to insert before my players username.

210
00:14:26,950 --> 00:14:34,690
However, if I just return only this text chat message properties, then it's going to ignore the other

211
00:14:34,690 --> 00:14:40,060
prefix that is already attached to my message, which is my username, and I'll show you what I mean.

212
00:14:40,060 --> 00:14:45,850
If I return just this properties that we just created and I go and play my game.

213
00:14:46,580 --> 00:14:51,230
And if I were to type a message in the chat, nothing should happen because we don't have VIP.

214
00:14:51,230 --> 00:14:53,420
So if I type hello, nothing happens.

215
00:14:53,420 --> 00:15:00,410
But if I go to the server and let's say I give my player VIP by adding an attribute on my player, that

216
00:15:00,410 --> 00:15:06,110
attribute was has VIP, which is a boolean, and we'll go ahead and set that equal to true.

217
00:15:06,140 --> 00:15:09,410
Now I go back to my client and I type in another message.

218
00:15:09,650 --> 00:15:15,260
As you can see, that property is overriding the previous prefix we had which was our username.

219
00:15:15,260 --> 00:15:19,130
So now we're only seeing VIP appear inside of the chat.

220
00:15:19,130 --> 00:15:26,060
And that's an issue if we want to both have our chat tag as well as our username, then there's something

221
00:15:26,060 --> 00:15:27,020
we must do.

222
00:15:27,410 --> 00:15:34,760
The thing we must do is that we have to grab the original prefix text that was stored inside of this

223
00:15:34,760 --> 00:15:40,370
text chat message instance, and that's very easy to do with this prefix text.

224
00:15:40,370 --> 00:15:45,470
We can go ahead and concatenate it with the message dot prefix text.

225
00:15:45,470 --> 00:15:48,530
And this text would be storing our username.

226
00:15:48,530 --> 00:15:54,350
And because I want there to be a gap between my username and this chat tag, I'm going to go ahead and

227
00:15:54,350 --> 00:15:55,730
add a space right here.

228
00:15:56,280 --> 00:16:02,520
Now we can go ahead and return this new set of text chat message properties, and we should have the

229
00:16:02,520 --> 00:16:07,440
VIP tag as well as our username appear in the chat.

230
00:16:07,740 --> 00:16:09,300
So if we go and play.

231
00:16:11,280 --> 00:16:12,930
If I type in the chat.

232
00:16:12,930 --> 00:16:16,050
Hello, nothing's going to happen because we don't have VIP.

233
00:16:16,200 --> 00:16:23,790
But if I go to the server and give this player a VIP, so has VIP set that equal to true.

234
00:16:23,790 --> 00:16:26,670
And then we go back and we say hello.

235
00:16:26,850 --> 00:16:32,640
Now I have the VIP chat tag and as well as my username.

236
00:16:32,640 --> 00:16:38,340
Now you might want to change the color of this VIP chat tag because it's the exact same color as my

237
00:16:38,340 --> 00:16:38,910
username.

238
00:16:38,910 --> 00:16:42,870
So this is where that rich text markup would come into play.

239
00:16:43,890 --> 00:16:49,980
If I would like to change the color of this VIP message right here, then we can go ahead and insert

240
00:16:49,980 --> 00:16:55,890
those two different tags one to open the tag and then one to close the tag so we know which block of

241
00:16:55,890 --> 00:16:57,180
text we want to manipulate.

242
00:16:57,180 --> 00:17:00,990
And to change the color, we have to do a less than symbol.

243
00:17:01,080 --> 00:17:05,700
Remember it is font color and we have to set it equal to an HTML or hex color.

244
00:17:05,700 --> 00:17:08,640
So that's going to be stored in another set of parentheses.

245
00:17:08,640 --> 00:17:13,440
And then we close that off with this greater than symbol.

246
00:17:13,440 --> 00:17:16,860
And then we have to insert a another tag in here.

247
00:17:16,860 --> 00:17:21,360
And that's going to be another less than symbol and then a greater than symbol.

248
00:17:21,360 --> 00:17:23,850
And we have to type in slash font.

249
00:17:24,330 --> 00:17:30,960
So now any text between these two tags right here are going to have this color applied to it.

250
00:17:31,830 --> 00:17:33,630
And we're getting a red underline here.

251
00:17:33,630 --> 00:17:39,510
And I believe that's because we actually need to use single quotations here instead of double quotations.

252
00:17:39,510 --> 00:17:40,080
There we go.

253
00:17:40,080 --> 00:17:46,290
So between these two quotations is where we're going to insert that um, HTML or hex color code.

254
00:17:46,290 --> 00:17:51,630
And to pick one we'll just go back to our text label and open up the text color editor.

255
00:17:51,630 --> 00:18:00,060
And let's say we want their text chat message to be like, um, maybe, maybe we'll do like a nice blue,

256
00:18:00,060 --> 00:18:03,240
something like that, maybe a little bit lighter.

257
00:18:03,240 --> 00:18:04,380
Yeah, we'll do something like that.

258
00:18:04,380 --> 00:18:06,150
We can go ahead and copy this.

259
00:18:06,840 --> 00:18:10,410
And then we can go ahead and insert it right here and now.

260
00:18:10,410 --> 00:18:17,100
Any VIP players in our game are going to have this VIP message right here in blue.

261
00:18:17,100 --> 00:18:23,910
And then I'll make sure to add my extra space outside right here and now if we go and play test the

262
00:18:23,910 --> 00:18:28,680
game, we should have a blue VIP tag instead of an orange VIP tag.

263
00:18:29,990 --> 00:18:31,760
Let me give my player VIP.

264
00:18:34,980 --> 00:18:38,010
And then we can go back and type in hello.

265
00:18:38,010 --> 00:18:43,500
And now we have a VIP blue tag next to our username.

266
00:18:43,500 --> 00:18:44,400
Very cool.

267
00:18:45,950 --> 00:18:50,810
The next property we can go ahead and take a look at is the on bubble added property, which we need

268
00:18:50,810 --> 00:18:52,310
to provide a function for.

269
00:18:52,310 --> 00:18:58,430
So in the text chat service we'll reference that property on bubble added and we'll set it equal to

270
00:18:58,430 --> 00:18:59,600
another new function.

271
00:18:59,600 --> 00:19:03,290
This function is also going to be passed a text chat message.

272
00:19:03,290 --> 00:19:04,880
So we'll just call it message here.

273
00:19:04,880 --> 00:19:10,520
And it's also passed one additional parameter which is called an adorni.

274
00:19:10,700 --> 00:19:17,750
And that basically means exactly what part in our game is going to have this bubble appear over it.

275
00:19:17,750 --> 00:19:23,390
So if you care about that, then it's also going to be passed in instance here where the bubble is going

276
00:19:23,390 --> 00:19:24,260
to display over.

277
00:19:24,260 --> 00:19:27,980
But if you don't care about it, then we can just ignore that parameter.

278
00:19:28,400 --> 00:19:34,670
And we basically just do the exact same thing in here that we did for the on incoming message callback,

279
00:19:34,670 --> 00:19:37,400
we first need to verify that there's a text source.

280
00:19:37,400 --> 00:19:41,840
So if there is not a message dot text source then we'll just return.

281
00:19:42,890 --> 00:19:43,640
Otherwise.

282
00:19:43,640 --> 00:19:49,220
This time we need to create a new instance called a bubble chat message property.

283
00:19:49,220 --> 00:19:53,450
So we'll call that properties and it's equal to instance dot new.

284
00:19:53,450 --> 00:19:57,320
And that instance is a bubble chat message properties.

285
00:19:57,860 --> 00:20:01,550
And then we can basically just copy the exact same thing that we did up here.

286
00:20:01,580 --> 00:20:09,290
Get the player from the text source, check if the I VIP and if they have VIP then we can go ahead and

287
00:20:09,290 --> 00:20:14,180
actually modify this property inside of this bubble chat message properties.

288
00:20:14,180 --> 00:20:15,980
There's a whole bunch of stuff we can change.

289
00:20:15,980 --> 00:20:20,060
For example, we can change the text color of the bubble.

290
00:20:20,060 --> 00:20:22,760
We can go ahead and modify the background color.

291
00:20:22,760 --> 00:20:24,530
We can change the font.

292
00:20:24,530 --> 00:20:27,260
We can change basically a whole bunch of different stuff.

293
00:20:27,260 --> 00:20:29,270
Let's go ahead and scroll in through here.

294
00:20:29,780 --> 00:20:31,640
There's the text size.

295
00:20:31,640 --> 00:20:36,680
We can um, add a tale, additional properties, stuff like that.

296
00:20:36,680 --> 00:20:38,690
So that's pretty cool.

297
00:20:39,130 --> 00:20:45,190
If we want to, let's say change the text color, we can update the text color three property equal

298
00:20:45,190 --> 00:20:46,960
to a new color three.

299
00:20:47,580 --> 00:20:48,990
And we'll do from RGB.

300
00:20:49,800 --> 00:20:56,460
And maybe we want the color to be something like, I don't know, maybe we want it to be like a dark

301
00:20:56,460 --> 00:20:57,480
orange.

302
00:20:58,550 --> 00:20:59,750
We'll do something like that.

303
00:21:00,290 --> 00:21:03,020
And then we can also go ahead and change the background color.

304
00:21:03,020 --> 00:21:08,780
So in the properties dot background color we can provide another new color three from RGB.

305
00:21:09,630 --> 00:21:13,830
And maybe we want the background to be like a darker shade of white.

306
00:21:13,830 --> 00:21:15,690
So we'll make it like a dark gray.

307
00:21:15,840 --> 00:21:18,270
Maybe we'll do something like that.

308
00:21:18,850 --> 00:21:21,550
And then maybe we want to change the font.

309
00:21:21,580 --> 00:21:21,940
Right.

310
00:21:21,940 --> 00:21:24,970
So in the properties we can change the font face.

311
00:21:25,270 --> 00:21:28,480
And this takes a data type called font.

312
00:21:28,690 --> 00:21:31,990
So to create a new font we type out font.

313
00:21:32,140 --> 00:21:35,380
And then there's a constructor in here to create a new font.

314
00:21:35,380 --> 00:21:39,430
But we want to go ahead and grab a font from an enum.

315
00:21:39,430 --> 00:21:46,270
So we pass an enum from the font enum to pass to this property font face.

316
00:21:46,270 --> 00:21:50,980
So we'll do from enum, and then we can access enum dot font.

317
00:21:50,980 --> 00:21:55,960
And then we can go ahead and pick whatever font we want inside of this enum.

318
00:21:55,960 --> 00:21:58,420
So maybe we'll pick something like arcade.

319
00:21:59,100 --> 00:22:01,710
So now we have modified this property.

320
00:22:01,740 --> 00:22:03,210
We can go ahead and return it.

321
00:22:03,210 --> 00:22:05,430
So we'll just return properties.

322
00:22:05,490 --> 00:22:11,370
So now any player in our game that's going to have VIP when they have a bubble message appear over them,

323
00:22:11,370 --> 00:22:16,650
we're going to change the text color, the background color of the bubble as well as the font.

324
00:22:16,650 --> 00:22:19,380
And this is only going to happen for VIP players.

325
00:22:19,710 --> 00:22:21,540
So if we go and play test the game.

326
00:22:22,590 --> 00:22:26,160
And now if I go and chat in my game and I say something like hello!

327
00:22:26,160 --> 00:22:33,150
As you can see, the bubble message that appears over my character is now this black color and this

328
00:22:33,180 --> 00:22:34,140
orange color.

329
00:22:34,740 --> 00:22:40,020
And realistically, you would have this local script on every single player that joins your game.

330
00:22:40,020 --> 00:22:47,730
So every single player in the game can see these changes, such as the VIP chat tag, as well as the

331
00:22:47,730 --> 00:22:51,480
Hello bubble message appearing over the player's character.

332
00:22:52,950 --> 00:22:54,510
In 30 lines of code.

333
00:22:54,510 --> 00:23:00,900
We have successfully modified any message that shows up in the chat window, or any message that appears

334
00:23:00,900 --> 00:23:04,230
as a bubble over the player's head if they have the IP.

335
00:23:04,470 --> 00:23:10,950
It's very easy to do, and there's a whole bunch of customization options that we are provided for modifying

336
00:23:10,950 --> 00:23:12,210
chat messages.

337
00:23:13,040 --> 00:23:20,240
And that's how you can use the text chat service to style and modify chat and bubble messages in your

338
00:23:20,240 --> 00:23:20,900
game.

339
00:23:21,380 --> 00:23:24,560
I hope you enjoyed and I'll see you in the next lecture.